<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>

    <title>登录 | Spring Security</title>
</head>
<body>
<div th:insert="~{header :: nav}"></div>
<div class="container" style="margin-top: 60px">
    <div class="row" style="margin-top: 100px">
        <div class="col-md-4 col-md-offset-4">
            <!--<div class="panel panel-default">-->
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-console"></span> Login</h3>
                </div>
                <div class="panel-body">
                    <div class="text-center">
                        <h3><i class="glyphicon glyphicon-lock" style="font-size:2em;"></i></h3>
                        <h2 class="text-center">Login</h2>
                        <div class="panel-body">

                            <form th:action="@{/login}" method="post">
                                <div class="form-group">
                                    <!--<div class="input-group col-md-6 col-md-offset-3">-->
                                    <div class="input-group">
                                        <span class="input-group-addon">@</span>
                                        <input id="username"
                                               name="username"
                                               autofocus="autofocus"
                                               class="form-control"
                                               placeholder="账号"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <!--<div class="input-group col-md-6 col-md-offset-3">-->
                                    <div class="input-group">
                                        <!--<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>-->
                                        <span class="input-group-addon">
                                            <i class="glyphicon glyphicon-lock"></i>
                                        </span>
                                        <input id="password"
                                               name="password"
                                               class="form-control"
                                               placeholder="密码"
                                               type="password"/>
                                    </div>
                                </div>

                                <div th:if="${param.error}">
                                    <div class="alert alert-danger">
                                        Invalid username or password.
                                    </div>
                                </div>
                                <div th:if="${param.error}">
                                    <p style="text-align: center" class="text-danger">登录失败，账号或密码错误!</p>
                                </div>
                                <div th:if="${result}">
                                    <p style="text-align: center" class="text-success" th:text="${result}"></p>
                                </div>
                                <div class="form-group">
                                    <label>
                                        <input id="remember-me"
                                               name="remember-me"
                                               type="checkbox"/> Remember me
                                    </label>
                                </div>
                                <div class="form-group">
                                    <div class="input-group col-md-6 col-md-offset-3 col-xs-12 ">
                                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group col-md-6 col-md-offset-3" style="text-align: center">
                                        创建账号 | 忘记密码?
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{/webjars/jquery/3.2.1/jquery.min.js/}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>

</body>
</html>